import { Link } from 'react-router-dom'
import { useState,useEffect } from 'react'
import { http } from '@/utils'
import Icon from '@/components/Icon'
import styles from './index.module.scss'
import portrait from '../../assets/images/1.jpeg'
const Profile = () => {
  const [userInfo, setUserInfo] = useState({})
  useEffect(()=>{
    // 进来就执行一次
    (async () => {
      try {
        // 请求获取用户自己信息
        const res = await http.get('/user')

        // 注意：如果此处接口状态码的是 401 说明 token 失效了（过期了）
        // console.log(res)

        const { data, message } = res.data
// console.log(data);
        if (message.toLowerCase() === 'ok') {
          // 获取成功更新内容
          setUserInfo(data)
        }
      } catch (e) {}
    })()
  },[])
  const {photo, name, like_count, follow_count, fans_count, art_count}=userInfo
  return (
    <div className={styles.root}>
      <div className="profile">
        <div className="user-info">
          <div className="avatar">
            <img src={photo||portrait} alt="" />
          </div>
          <div className="user-name">{name||'钟离'}</div>
          <Link to="/profile/edit">
            个人信息 <Icon type="iconbtn_right" />
          </Link>
        </div>

        <div className="read-info">
          <Icon type="iconbtn_readingtime" />
          今日阅读
          <span>10</span>
          分钟
        </div>

        <div className="count-list">
          <div className="count-item">
            <p>{art_count||0}</p>
            <p>动态</p>
          </div>
          <div className="count-item">
            <p>{follow_count||0}</p>
            <p>关注</p>
          </div>
          <div className="count-item">
            <p>{fans_count||0}</p>
            <p>粉丝</p>
          </div>
          <div className="count-item">
            <p>{like_count||0}</p>
            <p>被赞</p>
          </div>
        </div>

        <div className="user-links">
          <div className="link-item">
            <Icon type="iconbtn_mymessages" />
            <div>消息通知</div>
          </div>
          <div className="link-item">
            <Icon type="iconbtn_mycollect" />
            <div>收藏</div>
          </div>
          <div className="link-item">
            <Icon type="iconbtn_history1" />
            <div>浏览历史</div>
          </div>
          <div className="link-item">
            <Icon type="iconbtn_myworks" />
            <div>我的作品</div>
          </div>
        </div>
      </div>
      <div className="more-service">
        <h3>更多服务</h3>
        <div className="service-list">
          <div className="service-item">
            <Icon type="iconbtn_feedback" />
            <div>用户反馈</div>
          </div>
          <div className="service-item">
            <Icon type="iconbtn_xiaozhitongxue" />
            <div>小智同学</div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Profile
